{% extends "base_generic.html" %}

{% block content %}
    <div class="container mt-4">
        <h1>My Borrowed Books</h1>

        {% if bookinstance_list %}
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Book</th>
                        <th>Due Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for bookinst in bookinstance_list %}
                    <tr class="{% if bookinst.is_overdue %}table-danger{% endif %}">
                        <td><a href="{% url 'book-detail' bookinst.book.pk %}">{{bookinst.book.title}}</a></td>
                        <td>{{ bookinst.due_back }}</td>
                        <td>
                            {% if bookinst.is_overdue %}
                                <span class="badge bg-danger">Overdue</span>
                            {% else %}
                                <span class="badge bg-success">On loan</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
            <div class="alert alert-info">
                <p>There are no books borrowed.</p>
            </div>
        {% endif %}
    </div>
{% endblock %} 